<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="货权转移" name="1">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="货转日期" prop="transferDate" class="top">
								<el-date-picker
									v-model="formData.transferDate"
									type="date"
									size="mini"
                  value-format="yyyy-MM-dd"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转件数" prop="quantity" class="top">
								<el-input
									v-model="formData.quantity"
									size="mini"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转重量" prop="ton" class="top">
								<el-input
									v-model="formData.ton"
									size="mini"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转体积" prop="volume" class="top">
								<el-input
									v-model="formData.volume"
									size="mini"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="备注" prop="remark" class="top">
								<el-input
									type="textarea"
									:rows="2"
									placeholder="请输入备注"
									v-model="formData.remark"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="协议附件" prop="file" class="top">
                <Upload @changeFile="changeFile" :fileListEdit="fileList" />
							</el-form-item>
						</el-col>

					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import Upload from '@/components/upload'
export default {
  name: 'cargoTransfer',
  components: { BaseTable, Upload },
  props: {
    customerData: {
      type: Array
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
        transferType: 2,
        id: '',
        billId: '',
        mattachmentInfoList: [],
        cargoOwnerName: '',
        cargoAgentName: '',
        cargoInfoIdSource: '',
        cargoOwnerId: '',
        cargoAgentId: '',
        storageDate: '',
        transferDate: '',
        quantity: '',
        ton: '',
        volume: '',
        remark: ''
      }, // from
      fileList: [],
      rules: {
        transferDate: [
          { required: true, message: '请选择货转日期', trigger: 'blur' }
        ],
        cargoOwnerId: [
          { required: true, message: '请选择目标货主', trigger: 'blur' }
        ],
        cargoAgentId: [
          { required: true, message: '请选择目标货代', trigger: 'blur' }
        ],
        storageDate: [
          { required: true, message: '请选择堆存费起算日期', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入货转件数', trigger: 'blur' }
        ],
        ton: [
          { required: true, message: '请输入货转重量', trigger: 'blur' }
        ],
        volume: [
          { required: true, message: '请输入货转体积', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 修改文件
     */
    changeFile(fileList) {
      console.log('cargo');
      this.formData.mattachmentInfoList = fileList
    },
    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";

[v-cloak] {
	display: none;
}
</style>
